<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目案例——新闻信息管理</title>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <div id="app">
        <button class="btn" @click="add">{{btn}}</button>

        <form>
            <p>新闻编号：{{nextId}}</p>
            <p><input placeholder="新闻标题" id="tit" v-model="title" ><span></span></p>
            <p><textarea placeholder="新闻内容" id="msg" v-model="content"></textarea><span></span></p> <button @click="save()">保存</button>
            <button>关闭</button>
        </form>
        <form class="search"><input type="text" placeholder="查询关键字"> <button>搜索</button></form>
        <table class="my-table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>标题</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in news">
                    <td>{{item.id}}</td>
                    <td :title="item.content" id="a">
                        {{item.title}}</td>
                    <td>{{item.pubdate}}</td>
                    <td><a href="#" @click="update(item.id)">修改</a> | <a href="#" @click="del(index)">删除</a></td>
                </tr>

            </tbody>
            <tfoot>
                <tr>
                    <th>&nbsp;</th>
                    <td colspan="3">
                        总计：{{nextId-1}}条
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    //田嘉负责增加，马福龙负责删除和计数功能，王启航负责修改功能
    const app = Vue.createApp({
        data() {
            return {

                btn: "添加新闻",
                title: '',
                news: [{
                        id: 1,
                        title: '8月消费增速年内首次转正专家：下半年消费...',
                        content: '对于社会消费品零售总额同比增速年内首次由负转正，专家认为，这证明经济的复苏势头仍在持续推进，下半年随着消费旺季的到来，消费需求或将进一步释放，消费增长将延续回升势头。',
                        pubdate: '2021/09/08'
                    },
                    {
                        id: 2,
                        title: '狗不理王府井店被除名 网友：别说加盟店，...',
                        content: '近日，老字号“狗不理包子”因一则《维权声明》引发舆论关注。自媒体博主@谷岳在微博发布“探访评分最差餐厅”视频，随后，王府井狗不理餐厅在微博发布“针对网络不实视频的严正声明”称，该视频所有恶语中伤言论均为不实信息，要求“谷岳”及“北京人不知道的北京事儿”立即停止侵权行为，在大于现有影响的范围内消除影响并在国内主流媒体公开道歉。餐厅已报警处理。',
                        pubdate: '2021/09/09'
                    },
                    {
                        id: 3,
                        title: '腾讯回应“60岁老人凌晨三点打排位”：无法判断是否为“他人代过人脸”',
                        content: '9月9日午间，@腾讯成长守护平台 微博发布公告就网传图片“60岁老人凌晨三点排位”一事作出回应，称经过近3天的筛查比对，最后成功锁定到1个游戏账号。从技术手段和实际验证结论来看，系统认为确系“本人”在进行游戏。至于现实中该账号是否属于“他人代过人脸”，我们无法判断，也没有相关权限在企业后台数据之外做进一步确认',
                        pubdate: '2021/09/09'
                    }
                
                ],
                    nextId:4,
                   
            }
        },
        methods: {
           del(index){
            this.news.splice(index,1)
            this.nextId--
           },
           add(){
            
               if(this.title=='' || this.title == undefined || this.title==null){
                alert("新闻标题不能为空！！");
               }else if(this.content==''||this.content==undefined||this.content==null){
                alert("新闻内容不能为空！！")
               }else{
                this.news.push({
                   id:this.nextId++,
                   title:this.title,
                   content:this.content,
                   pubdate:new Date().toLocaleDateString()
               })
               this.title='',
               this.content=''
               }
           },
           update(id){
            var newslist = this.news.filter(function(item) {
                        return item.id == id;
                    });
                    this.id = newslist[0].id;
                    this.title = newslist[0].title;
                    this.content = newslist[0].content;
           },
           save(){
                        this.news.some((item) => {
                            if (item.id == this.id) {
                                item.content = this.content;
                                item.title = this.title;      
                            }
                        });
                    this.id = '';
                    this.title = '';
                    this.content = '';
                },
        }
    })
     app.mount("#app")
</script>

</html>
